<template>
  <div>
    <el-table
      border
      :data="items"
      show-summary
      sum-text="总计"
      :key="randomKey"
      style="width: 100%"
      @cell-click="editData"
    >
      <el-table-column label="旅游业带动农牧民转移就业统计表-景区（点）" align="center">
        <el-table-column scoped-slot>
          <template slot="header">
            <div style="display: flex; justify-content: space-around">
              <div>
                <span>填报单位：</span>
                <span>(具体到区县)</span>
              </div>
              <div>
                <span>填报人：</span>
                <span>张三</span>
              </div>
              <div>
                <span>填报时间：</span>
                <span>2024年8月1日</span>
              </div>
            </div>
          </template>
          <el-table-column label="乡村旅游接待情况">
            <el-table-column label="" prop="id"></el-table-column>
            <el-table-column label="收入" prop="id"></el-table-column>
          </el-table-column>
          <el-table-column label="序号" width="140" prop="sort" />
          <el-table-column label="景点" width="140" prop="city" />
          <el-table-column label="转移就业人数"
                          property="date"
                          width="140">
            <template slot-scope="scope">
              <el-input v-if="scope.row[scope.column.property + 'isShow']"
                        :ref="scope.column.property"
                        v-model="scope.row.date"
                        @blur="alterData(scope.row,scope.column)"></el-input>
              <span v-else>{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column label="转移就业人次"
                          property="id"
                          width="140">
            <template slot-scope="scope">
              <el-input v-if="scope.row[scope.column.property + 'isShow']"
                        :ref="scope.column.property"
                        v-model="scope.row.id"
                        @blur="alterData(scope.row,scope.column)"></el-input>
              <span v-else>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
        </el-table-column>

      </el-table-column>
    </el-table>
    <el-button @click="save">
      保存
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { city: '日喀则', date: '1', id: '0', sort: '0' },
        { city: '赛里木湖', date: '2', id: '1', sort: '1' },
        { city: '纳木错', date: '3', id: '2', sort: '2' },
        { city: '林芝', date: '4', id: '3', sort: '3' }
      ],
      randomKey: Math.random(),
    }
  },
  methods: {
    save() {
      console.log(this.items, '---------------this.items')
    },
    editData(row, column) {
      row[column.property + "isShow"] = true
      this.items.forEach(ele => {
        if (ele.city === row.city) {
          ele.date = row.date
          ele.id = row.id
        }
      })
      // refreshTable是table数据改动时，刷新table的
      this.refreshTable()
      console.log(row, column, this.items, '-----------------------cell-dblclick')
      this.$nextTick(() => {
        this.$refs[column.property] && this.$refs[column.property].focus()
      })
    },
    renderHeader(h, {column}) {
      // console.log(h, column, '------------------render')
      return (
        <div style='display: flex; justify-content: space-around'>
          <div >
            <span>填报单位：</span>
            <span >(具体到区县)</span>
          </div>
          <div >
            <span>填报人：</span>
            <span >张三</span>
          </div>
          <div >
            <span >填报时间：</span>
            <span>2024年8月1日</span>
          </div>
        </div>
      )
    },
    alterData(row, column) {
      row[column.property + 'isShow'] = false
      this.refreshTable()
    },
    refreshTable() {
      this.randomKey = Math.random()
    }
  }
}
</script>
<style >
.el-table thead.is-group th {
  background-color: #fff;
}
.el-table__footer-wrapper tbody td {
  background-color: #fff;
}
</style>
